<template>
  <div class="page">
        <div class="blur"></div>
        <div class="scan">
            <div class="f-row">
                <h1>商家扫描卷码即可消费</h1>
                <img src="/static/imgs_s08/s08_close.png" alt="">
            </div>
            <div class="tiao">
                <img src="/static/imgs_s08/s08_tiaoxiangma .png" alt="">
            </div>
            <div class="er">
                <img src="/static/imgs_s08/s08_erweima.png" alt="">
            </div>
        </div>
        <div class="top">
            <h1>恭喜你，拼团成功</h1>
            <div class="head-img">
                <div class="head1">
                    <img src="/static/imgs_s08/s08_head-img2.png" alt="">
                    <img class="tz" src="/static/imgs_s08/s08_tz.png" alt="">
                </div>
                <div class="head2">
                    <img src="/static/imgs_s08/s08_head-img1.png" alt="">
                </div>
            </div>
        </div>
        <div class="menu">
            <div class="imgs">
                <img src="/static/imgs_s08/s08_goods09.png" alt="">
            </div>
            <div class="txt3">
                <h3>单人两荤菜外卖套餐</h3>
                <div class="time">
                    <img src="/static/imgs_s08/s08_time.png" alt="">
                    <p>周一至周日 | 免预约</p>
                </div>
                <div class="add">
                    <img src="/static/imgs_s08/s08_address.png" alt="">
                    <p>24小时不成团退款 | 过期自动退</p>
                </div>
            </div>
            <div class="money">
                <span>￥15.9</span>
                <img src="/static/imgs_s08/s08_more.png" alt="">
            </div>
        </div>
        <div class="pri">
            <div class="pri-top">
                <div class="line"></div>
                <p>凭证</p>
                <div class="refund">申请退款</div>
            </div>
            <div class="pri-phone">
                <p>1646 0779 3740</p>
                <img src="/static/imgs_s08/s08_tdc.png" alt="">
            </div>
        </div>
        <div class="bottom">
            <div class="title2">
                <div class="colmun"></div>
                <p>商家信息</p>
            </div>
            <div class="add">
                <div class="imgs"></div>
                <div class="add-txt">
                    <p>汇方圆</p>
                    <div class="add-txt1">
                        <img src="/static/imgs_s08/s08_time.png" alt="">
                        <span>09:30 至 22:30</span>
                    </div>
                    <div class="add-txt1">
                        <img src="/static/imgs_s08/s08_address.png" alt="">
                        <span>63.6km | 中州大道农业路苏荷中心</span>
                    </div>
                </div>
                <img class="phone" src="/static/imgs_s08/s08_phone.png" alt="">
            </div>
        </div>
        <div class="place"></div>
        <div class="footer">
            <p>再来一单</p>
            <p>扫码验券</p>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .page {
            width: 100%;
            background-color: #ECECEC;
            font-family: "PingFang SC";
        }

        .top {
            width: 100%;
            height: 140px;
            background-color: #fff;
        }

        .top h1 {
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            color: rgba(38, 38, 38, 1);
            margin-top: 23px;
        }

        .head-img {
            display: flex;
            justify-content: center;
        }

        .head-img .head1 {
            position: relative;
            margin: 24px 14px;
        }

        .head-img .head2 {
            position: relative;
            margin: 24px 14px;
        }

        .head-img img {
            width: 47px;
            height: 47px;
            border-radius: 50%;
        }

        .head-img .tz {
            position: absolute;
            top: 5px;
            right: -5px;
            width: 15px;
            height: 8px;
            border-radius: 0;
        }

        .menu {
            position: relative;
            display: flex;
            width: 100%;
            height: 91px;
            margin-top: 10px;
            background-color: #fff;
        }

        .menu .imgs {
            position: absolute;
            top: 12px;
            left: 12px;
        }

        .menu .imgs img {
            width: 66px;
            height: 66px;
        }

        .menu .txt3 {
            position: absolute;
            top: 12px;
            left: 87px;
        }

        .txt3 h3 {
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .txt3 img {
            width: 14px;
            height: 14px;
        }

        .txt3 .time {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }

        .txt3 .add {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }

        .menu .money {
            position: absolute;
            top: 42px;
            right: 20px;
        }

        .money img {
            width: 11px;
            height: 11px;
        }

        .money span {
            font-size: 15px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-right: 5px;
        }

        .pri {
            width: 100%;
            height: 97px;
            margin-top: 10px;
            background-color: #fff;
        }

        .pri .pri-top {
            position: relative;
            display: flex;
            align-items: center;
            height: 48px;
            border-bottom: 1px solid #eee;
        }

        .pri-top .line {
            width: 3px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 2px;
            margin-left: 15px;
        }

        .pri-top p {
            font-size: 13px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
            margin-left: 6px;
        }

        .pri-top .refund {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 53px;
            height: 20px;
            border: 1px solid rgba(50, 177, 108, 1);
            border-radius: 3px;
            font-size: 10px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
            text-align: center;
            line-height: 20px;
        }

        .pri-phone {
            position: relative;
            height: 48px;
            display: flex;
            align-items: center;
        }

        .pri-phone p {
            font-size: 13px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-left: 14px;
        }

        .pri-phone img {
            position: absolute;
            right: 14px;
            width: 17px;
            height: 17px;
        }

        .bottom {
            width: 100%;
            height: 139px;
            background-color: #fff;
            margin-top: 10px;
        }

        .colmun {
            width: 3px;
            height: 13px;
            background: rgba(50, 177, 108, 1);
            border-radius: 2px;
            margin-top: 17px;
            margin-left: 15px;
        }

        .title2 {
            display: flex;
            height: 45px;
        }

        .title2 p {
            height: 15px;
            font-size: 13px;
            font-weight: bold;
            color: rgba(44, 44, 47, 1);
            margin-top: 15px;
            margin-left: 7px;
        }

        .bottom .add {
            height: 86px;
            display: flex;
            position: relative;
        }

        .add .imgs {
            width: 79px;
            height: 79px;
            background: rgba(236, 236, 236, 1);
            border-radius: 6px;
            margin-left: 15px;
        }

        .add-txt p {
            font-size: 16px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            margin-left: 9px;
        }

        .add-txt1 img {
            width: 14px;
            height: 14px;
        }

        .add-txt .add-txt1 {
            margin-left: 9px;
            margin-top: 10px;
        }

        .add-txt .add-txt1 span {
            font-size: 11px;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);

        }

        .add .phone {
            position: absolute;
            width: 22px;
            height: 22px;
            right: 14px;
            top: 28px;
        }

        .place {
            width: 100%;
            height: 300px;
            background-color: #ECECEC;
        }

        .footer {
            position: fixed;
            bottom: 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 44px;
            background-color: #fff;
            margin-top: 65px;
        }

        .footer p:nth-child(1) {
            position: absolute;
            right: 77px;
            top: 12px;
            width: 54px;
            height: 23px;
            border: 1px solid rgba(50, 177, 108, 1);
            border-radius: 3px;
            text-align: center;
            line-height: 23px;
            font-size: 11px;
            font-weight: 500;
            color: rgba(50, 177, 108, 1);
        }

        .footer p:nth-child(2) {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 54px;
            height: 23px;
            background: rgba(50, 177, 108, 1);
            border-radius: 3px;
            text-align: center;
            line-height: 23px;
            font-size: 11px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .blur {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 3;
            width: 100%;
            height: 850px;
            ;
            background-color: #000;
            opacity: 0.8;
        }

        .scan {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 4;
            width: 302px;
            height: 350px;
            background: rgba(255, 255, 255, 1);
            border-radius: 15px;
        }

        .scan .f-row {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }

        .f-row h1 {
            font-size: 14px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }

        .f-row img {
            position: absolute;
            right: 20px;
            width: 12px;
            height: 12px;

        }

        .tiao {
            margin-top: 40px;
        }

        .tiao img {
            width: 253px;
            height: 40px;
        }

        .er {
            margin-top: 26px;
        }

        .er img {
            width: 187px;
            height: 187px;
        }
    </style>
